<template>
    <div class="data-v-6ab044b6">
        <!-- 左侧栏 -->
        <Package :archivesListId="archivesListId" />
        <div class="left">
            <image-viewer class="imgview">
                <high-light>
                    <div>
                        <img class="cover" :src="archivesListId.cover" alt="" />
                        <h1>{{ archivesListId.title }}</h1>
                        <p class="issue">
                            发布于{{
                                archivesListId.publishAt
                                    | formatDate("YYYY-MM-DD")
                            }}
                            • 阅读量 {{ archivesListId.views }}
                        </p>
                        <div
                            class="_1F8nZG_3e-sxtkzObh163H"
                            v-html="archivesListId.html"
                        ></div>
                    </div>
                </high-light>
            </image-viewer>

            <!-- 评论 -->
            <div class="forum">
                <Comment :comment="comment" />
            </div>

            <!-- 推荐阅读 -->
            <div class="cate">
                <h3>推荐阅读</h3>
            </div>
            <div class="read">
                <div class="detilearticle">
                    <div
                        class="item"
                        v-for="item in articleList"
                        :key="item.id"
                    >
                        <ArticleItem :item="item" />
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="sticky">
                <Floor />
            </div>
            <BackTop />
        </div>
        <div class="ispay" v-if="archivesListId.totalAmount">
            <Ispay :totalAmount='archivesListId.totalAmount'/>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import BackTop from "@/components/BackTop";
import ArticleItem from "@/components/ArticleItem";
import HighLight from "@/components/HighLight";
import ImageViewer from "@/components/ImageViewer";
import Package from "@/components/Package";
import Floor from "@/components/Floor";
import Comment from "@/components/Konwledge/Comment";
import Ispay from '@/components/Ispay'

export default {
    components: {
        BackTop,
        ArticleItem,
        // AboutComment,
        HighLight,
        ImageViewer,
        Package,
        Floor,
        Comment,
        Ispay
    },
    methods: {
        ...mapActions({
            getArchivesListId: "archives/getArchivesListId",
            getComment: "about/getComment",
        }),
        ...mapMutations({
            ArchivesListId: "archives/ArchivesListId",
        }),
    },
    computed: {
        ...mapState({
            articleList: (state) => state.article.articleList,
            archivesListId: (state) => state.archives.archivesListId,
            comment: (state) => state.about.comment,
        }),
    },
    created() {
        // console.log("详情数据", this.archivesListId);
        this.getArchivesListId(this.$route.params.id);
        this.getComment();
    },
};
</script>

<style scoped lang='scss'>
.left {
    background-color: #e7eaee !important;
}
.imgview {
    background-color: var(--bg);
}
.read {
    background-color: var(--bg);
}
.right .sticky {
    position: sticky;
    transform: translateY(0px);
    margin-top: 0px;
    top: 1rem;
    margin-bottom: 1rem;
}
h1 {
    margin: 0.67em 0 0;
    color: inherit;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1rem;
    line-height: 1.5;
    text-align: center;
}
.left .SU8jTKpxU-YwxHLmnQU9s p {
    margin-bottom: 1.2em;
    color: inherit;
    font-style: italic;
    text-align: center;
}
.cate {
    text-align: center;
    font-weight: normal;
}
.detilearticle {
    padding: 1rem;
}
.aboutBottom div {
    width: 100%;
    box-sizing: border-box;
}
.aboutBottom .container .letf .commont {
    padding-top: 10px;
    width: 69%;
    height: 100%;
    margin-left: 0;
    background-color: var(--bg);
}
</style>